<template>
  <div class="maintainer-info">
    <div class="top">
      <div class="avatar">
        <UpdateAvatar></UpdateAvatar>
      </div>
      <div class="nickname">
        <p>{{ info.nickname }}</p>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <ul>
          <li class="content_item">账号：<span>{{ info.maintainer_email }}</span></li>
          <li class="content_item">姓名：<span>{{ info.nickname }}</span></li>
          <li class="content_item">手机号：<span>{{ info.phone }}</span></li>
          <li class="content_item">性别：<span>{{ info.gender }}</span></li>
          <li class="content_item">年龄：<span>{{ info.age }}</span></li>
          <li class="content_item">服务地区：<span>{{ info.service_address }}</span></li>
          <li class="content_item">服务类型：<span>{{ info.service_type }}</span></li>
        </ul>
        <el-button type="primary" size="mini" @click="updateInfo">修改信息</el-button>
      </div>
      <div class="img">
        <img src="@/assets/背景1.jpg" alt="">
      </div>
    </div>
    <!-- ---------------- -->
    <div class="dialog">
      <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="姓名" prop="nickname">
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="form.age" ></el-input>
          </el-form-item>
          <el-form-item label="服务地区" prop="service_address">
            <el-input v-model="form.service_address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleUpdateInfo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import UpdateAvatar from '@/components/userComponents/UpdateAvatar.vue'
import { mapState } from 'vuex'
import { updateInfoService } from '@/api/maintainer'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      info: {},
      dialogFormVisible: false,
      form: {},
      rules: {
        nickname: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为11位', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        age: [
          { type: 'number', min: 18, max: 60, message: '年龄在18-60之间', trigger: 'blur' },
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        service_address: [
          { required: true, message: '请输入服务地区', trigger: 'blur' }
        ]
      }

    }
  },
  created () {
    this.getMaintainerInfo()
  },
  methods: {
    async getMaintainerInfo () {
      await this.$store.dispatch('maintainerStore/getMaintainerInfoService')
      this.info = this.baseInfo
    },
    updateInfo () {
      this.dialogFormVisible = true
      this.form = this.info
    },
    handleClose () {
      this.form = {}
      this.getMaintainerInfo()
      this.dialogFormVisible = false
    },
    async handleUpdateInfo () {
      await this.$refs.form.validate()
      await updateInfoService(this.form).then(res => {
        if (res.status === 0) {
          this.getMaintainerInfo()
          this.dialogFormVisible = false
          Message.success('修改成功')
        }
      })
    }
  },
  computed: {
    ...mapState('maintainerStore', ['baseInfo'])
  },
  components: {
    UpdateAvatar
  }
}
</script>

<style lang="less" scoped>
.maintainer-info{
  .top{
    display: flex;
    align-items: center;
    .avatar{
      width: 20%;
      text-align: center;
    }
    .nickname{
      padding: 20px;
      text-align: center;
      font-size: 38px;
      font-weight: bold;
      color: #409EFF;
    }
  }
  .content{

    // margin: 0 auto;
    display: flex;
    padding: 30px;
    // background-color: #409EFF;
    .left{
      // width: 50%;
      flex: 1;
      .content_item{
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bolder;
        color: #aaa;
        span{
          font-size: 20px;
          color: #555;
          // color: #409EFF;
        }
      }
    }
    .img{
      flex: 1;
      background-color: #409EFF;
      img{
        width: 100%;
      }
    }
  }
}
</style>
